import React, { ReactElement } from 'react';
import {
  ImageBackground,
  Image,
  ImageProps,
  NativeSyntheticEvent,
  ImageErrorEventData,
  ImageStyle
} from 'react-native';
import Log from '../../common/log';

interface Props extends ImageProps {
  children?: ReactElement[] | ReactElement;
  style?: ImageStyle | ImageStyle[];
}

const FastImage = (props: Props): ReactElement => {
  const { children, onError } = props;
  if (children) {
    return (
      <ImageBackground
        {...props}
        onError={(err: NativeSyntheticEvent<ImageErrorEventData>): void => {
          if (onError) {
            onError(err);
          }
          Log.e('ImageBackground load', err.nativeEvent.error);
        }}
      >
        {children}
      </ImageBackground>
    );
  }
  return (
    <Image
      {...props}
      onError={(err: NativeSyntheticEvent<ImageErrorEventData>): void => {
        if (onError) {
          onError(err);
        }
        Log.e('Image load', err.nativeEvent.error);
      }}
    />
  );
};

export default FastImage;
